<template>
  <div
    v-loading="loading"
    element-loading-text="操作数据库有可能失败，请保存好数据库名为'shuati'的备份数据,如果抛出异常，请重新导入数据"
  >
    <el-dialog title="警告" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="为确保是管理员输入，请输入管理员手机号码">
          <el-input v-model="password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button @click="updateSql" type="primary">确 定</el-button>
      </div>
    </el-dialog>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="题目">
        <el-input v-model="form.question"></el-input>
      </el-form-item>
      <el-form-item label="选项A">
        <el-input v-model="form.item1"></el-input>
      </el-form-item>
      <el-form-item label="选项B">
        <el-input v-model="form.item2"></el-input>
      </el-form-item>
      <el-form-item label="选项C">
        <el-input v-model="form.item3"></el-input>
      </el-form-item>
      <el-form-item label="选项D">
        <el-input v-model="form.item4"></el-input>
      </el-form-item>
      <el-form-item label="正确答案">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="A" name="type"></el-checkbox>
          <el-checkbox label="B" name="type"></el-checkbox>
          <el-checkbox label="C" name="type"></el-checkbox>
          <el-checkbox label="D" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import tikuApi from "@/api/tiku/tiku";
import feedbackUtils from "@/utils/feedback";
import feedbackApi from "@/api/tiku/feedback";
import downloadApi from "@/utils/download";
import compareUtil from "@/utils/commonUtils";
export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      form: {
        question: "",
        item1: "",
        item2: "",
        item3: "",
        item4: "",
        answer: "",
        type: [],
      },
      loading: false,
      items: [], //原来的题目和答案
      dialogFormVisible: false,
      password: 0,
    };
  },
  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    getDetail: async function () {
      let getTiku = JSON.parse(localStorage.getItem("getTiku"));
      console.log(getTiku);
      if (getTiku == null) {
        getTiku = await tikuApi.getTiku();
        console.log(JSON.stringify(getTiku));
        localStorage.setItem("getTiku", JSON.stringify(getTiku));
      }
      getTiku = JSON.parse(localStorage.getItem("getTiku"));
      let tiku = getTiku.data.data;
      this.loading = true;
      let searchQuestion = decodeURIComponent(this.$route.params.question);
      let selectLib = decodeURIComponent(this.$route.params.selectLib);
      let _id = decodeURIComponent(this.$route.params._id);
      let items = await feedbackUtils.findItem(tiku, selectLib, searchQuestion);
      let { answer, item1, item2, item3, item4, question } = items;
      this.items = items;
      // 将解构出来的数据赋值给Vue实例中的form数据
      this.form.item1 = item1;
      this.form.item2 = item2;
      this.form.item3 = item3;
      this.form.item4 = item4;
      this.form.question = question;
      let type = answer.split("+");
      this.form.type = type;
      this.loading = false;
    },

    updateSql: async function () {
      console.log(this.password);
      if (this.password != 18527307932) {
        this.$message.error("输入密码错误");
        return;
      }
      this.dialogFormVisible = false;
      let { question, item1, item2, item3, item4 } = this.form;
      let ans = this.form.type;
      ans.sort();
      let answer = "";
      for (let i = 0; i < ans.length; i++) {
        const element = ans[i];
        answer = answer + ans[i];
        if (i < ans.length - 1) {
          answer = answer + "+";
        }
      }
      let newQues = { question, item1, item2, item3, item4, answer };
      let oldQues = this.items;
      let selectLib = decodeURIComponent(this.$route.params.selectLib);
      let _id = decodeURIComponent(this.$route.params._id);
      let account = decodeURIComponent(this.$route.params.account);
      let time = decodeURIComponent(this.$route.params.time);
      if (compareUtil.deepCompare(newQues, oldQues)) {
        this.$message.error("新旧题目不能一样");
        return;
      } else {
        let updateData = { newQues, oldQues, _id, selectLib, account, time };
        //先备份数据库
        this.loading = true;
        let res = await feedbackApi.feedBackBackup("shuati");
        downloadApi.saveFile(res.data);
        // console.log(downRes)
        //再进行数据库更新
        let update = await feedbackApi.updateFeedBack(updateData);
        console.log(update);
        if (update.code == 20000) {
          //这里的题库需要从数据库拿去最新的
          let getTiku = await tikuApi.getTiku();
          console.log(JSON.stringify(getTiku));
          this.$message({ message: "更新成功", type: "success" });
          localStorage.setItem("getTiku", JSON.stringify(getTiku));
        }
        this.loading = false;
        this.$router.go(-1);
      }
    },

    onSubmit: async function () {
      this.dialogFormVisible = true;
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    this.getDetail();
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>